<!-- 角色查看 -->
<template>
    <div class="check-role">
        <div class="search-con">
            <Input @on-change="handleClear" clearable placeholder="请输入员工姓名" v-model="searchValue" class="searchInput"/>
            <Button @click="handleSearch" class="searchBtn" type="primary">
                <Icon custom="iconfont icon-sousuo" :size="16"/><span>搜索</span>
            </Button>
            <Button type="primary" class="addBtn" @click="addUserBtn()">添加</Button>   
        </div>
        <Table border :columns="columns" :data="roleUserData" :stripe="true" class='assign'></Table>
        <Page :total="pageTotal" :current="pageno" :page-size="pageSize" @on-change="handlePage" 
            prev-text="上一页" next-text="下一页" />
        <Modal
            v-model="addUserModal"
            title="添加员工"
            width="800"
            class="addUserModal"
            @on-ok="addUserSubmit()"
            @on-cancel="cancel()">
            <div class="addUser">
                <add-user v-if="addUserModal" :addUserRoleId='addUserRoleId' :userRoleData='userRoleData' @selectedRoleUser="selectedRoleUser"></add-user>
            </div>
        </Modal>
    </div>
</template>

<script>
import addUser from "./add-user.vue";
import {getRoleUser,deleteRoleUser,addRoleUser} from "@/api/role";
export default {
    props:{
        roleUserData:{
            type:Array,
            default:[]
        },
        roleId:{
            type:Number,
            default:null
        },
        pageTotal:{
            type:Number,
            default:null
        }
    },
    data () {
        return {
            addUserRoleId:null,
            addUserModal:false,//添加员工模态框
            searchValue:'',//搜索关键字
            pageno:1,
            pageSize:10,
            userIds:[],
            columns: [
                {
                    title: "员工名称",
                    key: "name",
                },
                {
                    title: "手机号",
                    key: "phone",
                },
                {
                    title: "创建时间",
                    key: "createTime",
                    width:120
                },
                {
                    title: "操作",
                    key: "operation",
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',[
                                h('Button',{
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    style: {
                                        color:'#4074c7',
                                        fontSize:'14px'
                                    },
                                    on: {
                                        click:() => {
                                            this.$confirm({
                                                headTitle:"系统提示",
                                                tip:`是否删除员工 '${params.row.name}' 吗？`
                                            }).then(() => {
                                                deleteRoleUser(this.roleId,params.row.userId).then(res=>{
                                                    if(res.data.code==200 || res.data.code==201 || res.data.code==204){
                                                        this.$Message.success('删除成功');
                                                        this.$emit('roleUser')
                                                    }else{
                                                        this.$Message.warning('删除失败')
                                                    }
                                                })
                                            })
                                            .catch(() => {
                                                console.log('no')
                                            })
                                        }
                                    }
                                },'删除')
                            ])
                    }
                },
            ],
            data: [],
            userRoleData:[]
        };
    },
    watch:{
        roleUserData(newVal,oldVal){
            this.updateRoleData();
        }
    },
    mounted(){
        this.updateRoleData();
    },
    methods: {
        updateRoleData(){
            let params = {
                pagesize: 999,
            }
            getRoleUser(this.roleId,params).then(res =>{
                if (res.data.code == 200 || res.data.code == 201){
                    this.userRoleData = res.data.data.list;
                }
            })
        },
        handleClear (e) {
            if (e.target.value === '') {}
        },
        handleSearch () {
            let params = {
                keyword: this.searchValue,
            }
            this.getRoleUser(params);
        },
        getRoleUser(params){
            getRoleUser(this.roleId,params).then(res =>{
                if (res.data.code == 200 || res.data.code == 201){
                    this.roleUserData = res.data.data.list;
                    this.pageTotal = res.data.data.total;
                }
            })
        },
        handlePage(value) {
            this.pageno = value;
            this.$emit('roleUser',value)
        },        
        addUserBtn(){
            this.addUserModal=true;
            this.addUserRoleId = this.roleId;
        },
        selectedRoleUser(data){
            this.userIds = data;
        },
        addUserSubmit(){
            if(this.userIds.length == 0){
                this.$Message.error('请选择员工');
                return;
            }
            let data={
                userIds: JSON.stringify(this.userIds)
            }
            addRoleUser(this.roleId,data).then(res=>{
                if(res.data.code==200 || res.data.code==201 || res.data.code==204){
                    this.$emit('roleUser',1)
                    this.$Message.success(res.data.msg);
                }
            })
        },
        cancel(){
            this.userIds = [];
            this.addUserModal = false;
        }
    },
    components: {addUser},
}

</script>
<style lang='less'>
@import "~@/less/common.less";
.check-role{
    padding: 20px 30px;
    .search-con{
        padding-bottom: 15px;
        .searchBtn,.addBtn{
            margin-left: 10px;
            font-size: 14px;
            height: 32px;
            .icon-sousuo{
                padding-right: 5px;
                padding-bottom: 2px;
            }
            span{
                vertical-align: baseline;
            }
        }
        .searchInput{
            width: 200px;
        }
    }  
}
.assign{
    margin-bottom: 15px;
    table{
        th,td{
            font-size: 14px;
            .ivu-btn:hover{
                background: none;
                color: #ed4014 !important;
                text-decoration: underline;
                border-color: transparent;
            }
        }
    }
}
.addUserModal{
    .ivu-modal-footer{
            .ivu-btn-text{
                margin-right: 12px;
                border: 1px solid @color-border;
                &:hover{
                    border-color: @mainColor;
                }
            }
        }
}
</style>